<template>
   <div class="content">

       <mt-header fixed title="查阅电子书" class="header">
            
        </mt-header>
  
                <div v-for="(item,index) in book_name" class="imgDiv" @click="togo(index)">
                    <img :src="getbook_ico(index)" alt="">
                    <div>{{book_name[index]}}</div>
                </div>

   </div>
</template>

<script>
    export default{
        data(){
            return{
                book_name:[
                   "自在独行","浮生六记","沉默的大多数","沉默的大多数","撒哈拉的故事","你是人间的四月天","当我跑步时我谈些什么","皮囊"
                ],
                book_ico:[
                    "./src/assets/book/s01.jpg",
                    "./src/assets/book/s02.jpg",
                    "./src/assets/book/s03.jpg",
                    "./src/assets/book/s04.jpg",
                    "./src/assets/book/s05.jpg",
                    "./src/assets/book/s06.jpg",
                    "./src/assets/book/s07.jpg",
                    "./src/assets/book/s08.jpg",
                ],
                book_engName:[
                    "booo_1","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ]
            }
        },
        methods:{
            getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id为书名的id，在store中找到
                this.$store.commit("choosebooks",id);
                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            }
        }
    }
</script>

<style>
    .content{
        background-color:#ffffff;
        height: auto;
        padding-top:10%;
        padding-bottom:200%;
        margin-bottom:-18%;
    }



    .content .imgDiv {
        width:29.5%;

        float: left;
        font-family: 华文行楷;
        font-size: 120%;
        margin-left:3%;
        margin-top:8%;


    }

    .content img {
        border: 0.5px solid #080808;
        box-shadow:3px 2px 6px #000;
        width: 85%;
        height: auto;
    }


</style>